<template>
  <div class="delivery">
    <div class="delivery-search">
      <span class="title">请输入车牌号</span>
      <div class="display-flex content">
        <template v-for="(item, index) in keyBoard.kbLenght">
          <div class="plate-item" v-if="index != keyBoard.indexNum" :class="{ 'active': index === keyBoard.indexNum }"
            @click="carPlateInput(index)">
            {{ keyBoard.value[index] || '' }}
          </div>
          <!-- 新能源多一位车牌 -->
          <div class="plate-item" v-if="index == keyBoard.indexNum" :class="{ 'active': index === keyBoard.indexNum }"
            @click="carPlateInput(index)">
            <span>{{ keyBoard.value[index] || '' }}</span>
          </div>
        </template>
      </div>
      <div class="delivery-search-footer">
        <van-button class="btn btn-check" @click="handleSearch">查询</van-button>
        <van-button class="btn btn-reset" plain color="#0888FF" @click="reset">重置</van-button>
      </div>
    </div>
    <div class="delivery-section-no-data font-size-26"
      v-show="deliveryListData.list.length === 0 && deliveryListData.init === 1">
      <van-image :src="noDataIcon" class="no-data-icon" />
      <span class="display-block">抱歉！查询不到相关订单， </span>
      <span class="display-block font-CE0C0C">请确认车牌号或者联系货主</span>
    </div>
    <template v-for="item in deliveryListData.list" :key="item.dzid">
      <div class="delivery-section font-size-30" v-show="deliveryListData.list.length > 0">

        <div class="title">
          <span class="title-box title-box-out" v-if="item.dzlb === 'ck_spdjout'">出仓</span>
          <span class="title-box title-box-out" v-if="item.dzlb === 'changeCar'">过车出仓</span>
          <span class="title-box title-box-in" v-if="item.dzlb === 'ck_spdjin'">入仓</span>
        </div>
        <div class="content" style="position: relative;">
          <div class="nav-box" v-if="item.longlat" @click="handleGetLocation(item)">
            <img class="nav" src="@/assets/images/nav.png">
            <span class="text">导航</span>
          </div>
          <div class="item display-flex">
            <span class="label">仓库：</span>
            <span style="font-weight: bold;">{{ item.spckmc }}</span>
          </div>
          <div class="item display-flex">
            <span class="label" v-if="item.dzlb === 'ck_spdjout'">出仓日期：</span>
            <span class="label" v-if="item.dzlb === 'changeCar'">过车日期：</span>
            <span class="label" v-if="item.dzlb === 'ck_spdjin'">入仓日期：</span>
            <span>{{ item.ssrqid }}</span>
          </div>
          <div class="item display-flex">
            <span class="label">件数重量：</span>
            <span>{{ item.spjs }}件 {{ item.spsl }}吨</span>
          </div>
          <div class="item display-flex">
            <span class="label">单号：</span>
            <span>{{ item.pzbh }}</span>
          </div>
          <div class="item display-flex">
            <span class="label">车辆信息：</span>
            <span>{{ item.dzzy6 }}{{ item.dzzy7 ? '/' + item.dzzy7 : '' }}</span>
          </div>
          <div class="item display-flex">
            <span class="label">仓库公告：</span>
            <span class="flex-item">{{ item.notice }}</span>
          </div>
          <div class="item display-flex">
            <span class="label">仓库地址：</span>
            <span class="flex-item">{{ item.sheng }}{{ item.shi }}{{ item.qu }}{{ item.saddress }}</span>
          </div>
        </div>
      </div>
    </template>
    <NumberPlate :kbShow="keyBoard.isShow" :kbIndex="keyBoard.indexNum" @childValue="keyboardValue"
      @childClose="keyboardClose" @childIndex="keyboardIndex" @childDel="keyboardDel"></NumberPlate>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, computed } from 'vue'
import { getDeliveryList } from '@/api/delivery'
import { getSignature } from "@/api/wxConfig";
import type { DeliveryListData, KeyBoard } from '@/type/delivery'
import noDataIcon from '@/assets/images/no_data.png'
import NumberPlate from '@/components/numberPlate.vue'
import { msgError } from '@/utils/message'
import wx from "weixin-js-sdk";
const key = '';
const keyBoard: KeyBoard = reactive({
  isShow: true,
  kbLenght: 8,
  indexNum: 0,
  value: [],
})
const deliveryListData: any = reactive({
  init: 0,
  loading: true,
  query: {
    dzzy6: "",
  },
  list: [],
  params: {
    pageNum: 1,
    pageSize: 9999
  }
})

function deliveryList() {
  deliveryListData.loading = true
  getDeliveryList(deliveryListData.query, deliveryListData.params).then((res: any) => {
    deliveryListData.loading = false
    deliveryListData.init = 1
    deliveryListData.list = res.data
  })
}

function reset() {
  keyBoard.value = []
  deliveryListData.query.dzzy6 = ''
  deliveryListData.init = 0
  keyBoard.isShow = false
  keyBoard.indexNum = -1
  deliveryListData.list = []
}

function handleSearch() {
  if (keyBoard.value.length === 0) return msgError('请先输入车牌号码！')
  if (keyBoard.value.length < 7) return msgError('请输入完整车牌号码！')
  let dzzy6: string = ''
  const data: Array<string> = keyBoard.value
  for (let i in data) {
    dzzy6 += data[i]
  }
  deliveryListData.query.dzzy6 = dzzy6
  keyBoard.isShow = false
  deliveryList()
}

//点击车牌输入框
function carPlateInput(num: number) {
  keyBoard.isShow = true //显示键盘
  keyBoard.indexNum = num //设置键盘焦点下标
}

//键盘点击返回的值
function keyboardValue(res: string) {
  const index: any = keyBoard.indexNum
  keyBoard.value[index] = res
}

//删除键盘值
function keyboardDel(res: any) {
  const index: any = keyBoard.indexNum
  keyBoard.value.splice(index, 1)
}

//关闭
function keyboardClose(res: any): any {
  keyBoard.isShow = res
  keyBoard.indexNum = -1 //关闭键盘键盘高亮取消
}

//车牌焦点下标
function keyboardIndex(res: any) {
  keyBoard.indexNum = res;
}

async function handleGetLocation(row: any) {
  const title = row.spckmc;
  const address = row.shi + row.sheng + row.qu + row.saddress;
  let end = (row.longlat && row.longlat.split(',')) || '';
  if (!end.length) return msgError('该仓库地址不完善');
  let data = { appId: '', timestamp: '', nonceStr: '', signature: '' };
  await getSignature({}, { url: location.href.split('#')[0] }).then((res: any) => {
    data = res.data;
  })

  await wx.config({
    debug: false,
    appId: data.appId, //必填，公众号的唯一标识
    timestamp: data.timestamp, // 必填，生成签名的时间戳
    nonceStr: data.nonceStr, //必填，生成签名的随机串
    signature: data.signature,// 必填，签名
    jsApiList: ["openLocation"] //必填，需要使用的JS接口列表，所有JS接
  })
  wx.ready(() => {
    wx.checkJsApi({
      jsApiList: ['openLocation'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
      success: function (res: any) {
        console.log('checkJsApi--success');
        // 以键值对的形式返回，可用的api值true，不可用为false
        // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
        if (res.checkResult.openLocation == true) {
          wx.openLocation({
            latitude: Number(end[1]), // 纬度，浮点数，范围为90 ~ -90
            longitude: Number(end[0]), // 经度，浮点数，范围为180 ~ -180。
            name: title, // 位置名
            address: address, // 地址详情说明
            scale: 15, // 地图缩放级别,整型值,范围从1~28。默认为最大
            infoUrl: '' // 在查看位置界面底部显示的超链接,可点击跳转
          });
        } else if (res.checkResult.openLocation == false) {
          msgError('该微信版本不支持使用微信内置地图查看位置');
        }
      },
      fail: function (err: any) {
        console.log(err, 'checkJsApi--fail');
      }
    });
  })
  wx.error(function (err: any) {
    console.log(err, 'wx.error');
  });
}

</script>
<style lang="scss" scoped>
.delivery {
  min-height: 800px;
  background: linear-gradient(#3B93FF 0%, #B9E3FF 50%, #F5F5F5 100%);
  padding: 22px 24px 73px;

  &-search {
    background-color: #fff;
    border-radius: 16px;
    padding: 33px 30px 42px;

    .title {
      color: #333333;
      font-size: 32px;
    }

    .content {
      margin: 30px 0 70px;
      display: flex;

      .plate-item {
        width: 64px;
        height: 64px;
        line-height: 64px;
        text-align: center;
        border-radius: 6px;
        border: 1px solid #DCDCDC;
        margin: 0 5px;
        padding: 0;
        box-sizing: border-box;
        font-size: 32px;

        &.active {
          border: 1px solid #2D8CF0;
        }

        // &:nth-child(2) {
        // 	margin-right: 30px;
        // 	&:after {
        // 		display: block;
        // 		position: absolute;
        // 		content: '';
        // 		height: 10px;
        // 		width: 10px;
        // 		right: -26px;
        // 		border-radius: 12px;
        // 		background-color: #c3c2cb;
        // 	}
        // }
      }

      .point {
        display: flex;
        width: 14px;
        height: 14px;
        border-radius: 14px;
        margin-top: 40px;
        background-color: #c3c2cb;
      }

      .icondiandongche {
        color: #2D8CF0;
        font-size: 26px;
      }
    }

    &-footer {
      text-align: center;

      .btn {
        width: 571px;
        height: 80px;
        box-sizing: border-box;
        border-radius: 10px;
        border-radius: 40px;
      }

      .btn-check {
        color: #fff;
        background: linear-gradient(90deg, #41B0FD 0%, #1F63FD 100%);
      }

      .btn-reset {
        margin-top: 23px;
      }
    }
  }

  &-section-no-data {
    margin-top: 119px;
    text-align: center;

    .no-data-icon {
      margin-bottom: 49px;
      width: 198px;
      height: 198px;
    }
  }

  &-section {
    border-radius: 16px;
    background-color: #fff;
    margin-top: 20px;

    .title {
      padding: 15px 0;

      .title-box {
        width: 132px;
        height: 56px;
        line-height: 56px;
        display: inline-block;
        border-top-left-radius: 28px;
        border-top-right-radius: 28px;
        border-bottom-right-radius: 28px;
        color: #fff;
        font-size: 30px;
        font-weight: bold;
        text-align: center;
      }

      .title-box-in {
        background: linear-gradient(90deg, #6BE579 0%, #10BD5E 100%);
      }

      .title-box-out {
        background: linear-gradient(90deg, #58BDFD 0%, #2D96FF 100%);
      }
    }

    .content {
      border-top: 1px solid #EEEEEE;
      margin: 0 26px;
      padding: 26px 0 0;

      .nav-box {
        position: absolute;
        top: 10px;
        right: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .nav {
          width: 80px;
          height: 80px;
        }
        .text{
          font-size: 24px;
          color: #999;
        }
      }

      .item {
        padding-bottom: 20px;

        .label {
          text-align: right;
          color: #999;
          width: 160px;
          display: inline-block;
        }
      }
    }

  }
}
</style>